<template>
  <div>
    <crumbs :BreadCrumb="BreadCrumb"></crumbs>
    <div>
      <el-form
        :inline="true"
        :model="searchForm"
        class="demo-form-inline"
        label-width="90px"
      >
        <div>
          <el-form-item label="客户姓名">
            <el-input v-model="searchForm.customerName" clearable></el-input>
          </el-form-item>
          <el-form-item label="证件号码">
            <el-input v-model="searchForm.credNum" clearable></el-input>
          </el-form-item>
          <el-form-item label="单位名称">
            <el-input v-model="searchForm.company" clearable></el-input>
          </el-form-item>
          <el-form-item label="诊疗ID">
            <el-input v-model="searchForm.patientId" clearable></el-input>
          </el-form-item>
          <el-form-item label="注册时间">
            <el-date-picker
              v-model="searchForm.gmtCreateArr"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="注册来源">
            <el-select v-model="searchForm.source" clearable>
              <el-option label="线上预约" value="1"></el-option>
              <el-option label="线下登记" value="2"></el-option>
              <el-option label="系统转入" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="个人状态">
            <el-select v-model="searchForm.status" clearable>
              <el-option label="无效" value="0"></el-option>
              <el-option label="正常" value="1"></el-option>
              <el-option label="限制" value="2"></el-option>
              <el-option label="拉黑" value="3"></el-option>
              <el-option label="死亡" value="4"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
                icon="el-icon-search"
                type="primary"
                @click="getPeCustomersList"
            ></el-button>
            <el-button type="primary" @click="dialogFormVisible = true"
            >个人登记
            </el-button
            >
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div>
      <el-table
          ref="multipleTable"
          :data="tableDatalist"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <!-- <el-table-column sortable  prop="orderNo" label="体检单号" width="120">
        </el-table-column> -->
        <el-table-column prop="num" label="诊疗ID" width="120">
        </el-table-column>
        <el-table-column prop="customerName" label="客户姓名" width="120">
        </el-table-column>

        <el-table-column prop="sex" label="性别" width="120">
          <template slot-scope="scope">
            {{ scope.row.sex | formatSex }}
          </template>
        </el-table-column>
        <el-table-column prop="age" label="年龄" width="120">
        </el-table-column>
<!--        <el-table-column prop="birth" label="出生日期" width="120">-->
<!--        </el-table-column>-->
<!--        <el-table-column prop="nativePlace" label="籍贯" width="120">-->
<!--        </el-table-column>-->
<!--        <el-table-column prop="folk" label="民族" width="120">-->
<!--        </el-table-column>-->
<!--        <el-table-column prop="marriage" label="婚姻" width="120">-->
<!--          <template slot-scope="scope">-->
<!--            {{ scope.row.marriage | formatMarriage }}-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column prop="telephone" label="手机号" width="120">
        </el-table-column>
<!--        <el-table-column prop="credKind" label="证件类型" width="120">-->
<!--          <template slot-scope="scope">-->
<!--            {{ scope.row.credKind | formatCard }}-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column prop="credNum" label="证件号码" width="120">-->
<!--        </el-table-column>-->
        <el-table-column prop="registerId" label="个人编号" width="120">
        </el-table-column>
        <el-table-column prop="company" label="单位名称" width="120">
        </el-table-column>
<!--        <el-table-column prop="deptname" label="二级部门" width="120">-->
<!--        </el-table-column>-->
        <el-table-column prop="status" label="个人状态" width="120">
          <template slot-scope="scope">
            {{ scope.row.status | formatStatus }}
          </template>
        </el-table-column>
        <el-table-column prop="" label="课题人员" width="120">
        </el-table-column>
        <el-table-column prop="gmtCreate" label="注册时间" width="180">
          <template slot-scope="scope">{{formatTimes(scope.row.gmtCreate)}}</template>
        </el-table-column>
        <el-table-column prop="name" label="操作" width="280" fixed="right">
					<template slot-scope="scope">
						<el-button @click="handleClick(scope.row)">修改</el-button>
						<el-button type="primary" @click="toSavePage(scope.row)">以往体检</el-button>
						<el-button type="danger" @click="deletePeCustomers(scope.row)">删除</el-button>
					</template>
        </el-table-column>
      </el-table>
    </div>
    <div class="block">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNo"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
    <!-- 个人登记弹框 -->
    <el-dialog
        title="个人体检"
        :visible.sync="dialogFormVisible"
        width="80%"
        class="top_dialog"
    >
      <el-form :model="form" label-position="left">
        <div class="add_info">
          <userinfos ref="riskForm" :queryform="queryform"></userinfos>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="checkSign()">审核完成</el-button>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import crumbs from "../../views/Crumbs.vue";
import userinfos from "../common/userinfos.vue";
import { formatTimeToStr }  from "../../common/utils/date.js";

export default {
  components: {
    crumbs,
    userinfos,
  },
  data() {
    return {
      searchForm:{},
      list: [],
      // 是否缴费
      checked: false,
			// 原价合计
			originalprice: 0,
			costprice:0,
      // 页面列表
      tableDatalist:[],
      chargeis:false,
      activeName:'first',
      formLabelWidth: "80px",
      listgeren:[],
      BreadCrumb: [
        { path: "", name: "检前管理" },
        { path: "/basic/staff", name: "体检管理" },
      ],
      form: {
        type: "12",
      },
      tableData: [],
      tableDatas: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
			title:"",
			// select全选
			multipleSelection: [],
			// 个人登记
			checkform: {},
			dialogFormVisible: false,
			// 页码
			pageSize: 10,
			pageNo: 1,
      total: 0,
      id: null,
			queryform: {},
    };
  },

	created() {
		this.getPeCustomersList();
	},
  methods: {
		// 以往体检
		toSavePage(row) {
		  // console.log(row)
		  this.$router.push({name: "visitphysician_save", query: {id: row.orderNo}});
		},
		// 登记审核
		checkSign() {
			// console.log(this.checkform);
		  this.id = null
		  this.title = '添加信息'
			this.dialogFormVisible = true;
			// 获取子组件form
			this.checkform = this.$refs.riskForm.$refs.riskFormRef.model;
			// console.log("子组件表单信息：",this.checkform)
			// 在这里验证
			this.$refs.riskForm.$refs.riskFormRef.validate((valid) => {
			   if (valid) {
						this.addinsertCustom();
			   } else {
						console.log('error submit!!');
						return false;
			   }
			 });
		},
		// 个人登记
		addinsertCustom(formName){
		  if(this.id ==null){
		    this.$axios.insertPeCustomers({
		      ...this.checkform
		    }).then(res=>{
		      if(res.code == '00000'){
		        this.$message({
		          type:'success',
		          message:res.msg
		        })
		        this.dialogFormVisible = false
		        this.getPeCustomersList()
		        }
		      console.log(res)
		    })
		  }else{
		    this.$axios.updatePeCustomers({
		      id:this.id,
					// ...this.checkform
		    }).then(res=>{
		      if(res.code =='00000'){
		        this.$message({
		          type:'success',
		          message:res.msg
		        })
		        this.dialogFormVisible = false
		        this.getqueryPbHospitalList()
		      }
		      console.log(res)
		    })
		  }
		},
		// 编辑
		handleClick(row){
		  this.$axios.getPeCustomersById({
		    peCustomersId:row.id
		  }).then(res=>{
		    if(res.code == '00000'){
		      this.id = res.data.id
		      this.queryform = res.data
					this.title = '编辑信息'
					this.dialogFormVisible=true
		    }
		    // console.log(res.data,this.queryform)
		  })
		},
		// 列表删除
		deletePeCustomers(row){
		  this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
		    confirmButtonText: '确定',
		    cancelButtonText: '取消',
		    type: 'warning'
		  }).then(() => {
		    this.$axios.deletePeCustomers({
		      peCustomersId:row.id
		    }).then(res=>{
		      console.log(res)
		      if(res.code == '00000'){
		        this.$message({
		          type: 'success',
		          message: '删除成功!'
		        });
		        this.getPeCustomersList()
		      }
		    })
		  }).catch(() => {
		    this.$message({
		      type: 'info',
		      message: '已取消删除'
		    });
		  });
		},
		// 查找条件
		getqueryMedical() {
		  this.$axios.queryPbPersonsList(this.searchForm).then(res => {
		    if (res.code == '00000') {
		      this.tableData = res.data.records
		      this.total = res.data.total
		    }
		  })
		},
		// 查询客户信息列表
		getPeCustomersList(){
		  if(this.searchForm.gmtCreateArr && this.searchForm.gmtCreateArr.length ===2){
		    this.searchForm.startGmtCreate=this.searchForm.gmtCreateArr[0]
        this.searchForm.endGmtCreate=this.searchForm.gmtCreateArr[1]
      }
		  this.doGetList(this.searchForm)
		},
    doGetList(req){
		  this.$axios.getPeCustomersList(req).then(res=>{
		    if(res.code =='00000'){
		      this.tableDatalist = res.data.records
		      this.total = res.data.total
		    }
		  })
    },
		// 每页几条
    handleSizeChange(val) {
      this.pageSize = val
      const req = {
      	...this.searchForm,
				pageSize:this.pageSize,
				pageNo:this.pageNo,
      }
      this.doGetList(req)
    },
    // 第几页
    handleCurrentChange(val) {
      this.pageNo = val
      const req = {
      	...this.searchForm,
				pageSize:this.pageSize,
				pageNo:this.pageNo,
      }
      this.doGetList(req)
    },

		handleSelectionChange(val) {
			this.multipleSelection = val;
		},
  },
};
</script>

<style scoped>
.add_info {
  display: flex;
}
.message {
}
.info_r {
  width: 50%;
  margin-left: 20px;
}
.info_s{
  width: 50%;
}
.info_rs {
  width: 100%;
  margin-left: 20px;
}
.add_info .el-divider--horizontal {
  margin-top: 10px;
}
.tab_b {
  display: flex;
  justify-content: space-between;
  line-height: 50px;
}
.tab_c {
  display: flex;
}

.top_dialog /deep/ .el-dialog {
  margin-top: 3vh !important;
}
.block {
  text-align: center;
}

.info_l_tree {
  width: 200px;
}

.info_sel {
  display: flex;
  width: 700px;
}
.info_sel_l {
  width: 50%;
}
.info_sel_r {
  width: 50%;
  margin-left: 50px;
}
.info_sel_butn {
  margin-left: 20px;
}
.jiaofei {
  display: flex;
  justify-content: flex-end;
}
.tuanjian_top{
  display: flex;
}
</style>
